<template>
  <div class="editUser">
    <!-- 顶部栏 -->
    <div class="topBar">
      <van-nav-bar class="page-nav-bar" title="用户信息">
        <van-icon slot="left" name="arrow-left" size="18" @click="$router.back()" />
      </van-nav-bar>

      <div class="content">
        <van-cell title="头像" is-link value="内容" @click="imgChange">
          <input type="file" hidden @change="upURL" ref="file" />
          <van-image round class="userImg" :src="userProfile.photo" />
        </van-cell>

        <van-cell title="昵称" is-link :value="userProfile.name" @click="namePopup=true" />

        <van-cell title="手机号" is-link :value="userProfile.mobile" @click="mobileChange" />

        <van-cell
          title="性别"
          is-link
          :value="userProfile.gender==0?'男':'女'"
          @click="genderPopup=true"
        />

        <van-cell title="生日" is-link :value="userProfile.birthday" @click="birthdayPopup=true" />
      </div>

      <!-- 图片弹出框 -->
      <van-popup class="userimg" v-model="imgPopup" position="bottom" :style="{ height: '100%' }">
        <img-popupbox v-if="imgPopup" :imgUrl="localImg" @close="replaceImg" />
      </van-popup>

      <!-- 名称弹出框 -->
      <van-popup class="userName" v-model="namePopup" position="bottom" :style="{ height: '100%' }">
        <name-popupbox v-if="namePopup" :name="userProfile.name" @close="nameChange" />
      </van-popup>

      <!-- 手机弹出框 -->
      <van-popup
        class="userMobile"
        v-model="mobilePopup"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <mobile-popupbox />
      </van-popup>

      <!-- 性别弹出框 -->
      <van-popup v-model="genderPopup" position="bottom">
        <gender-popupbox :sex="userProfile.gender" @close="genderChange" />
      </van-popup>

      <!-- 生日弹出框 -->
      <van-popup v-model="birthdayPopup" position="bottom">
        <birthday-popupbox @close="birthdayChange" :birthday="userProfile.birthday" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/axios";
import ImgPopupbox from "@/views/user/components/img-popupbox";
import NamePopupbox from "@/views/user/components/name-popupbox";
import MobilePopupbox from "@/views/user/components/mobile-popupbox";
import GenderPopupbox from "@/views/user/components/gender-popupbox";
import BirthdayPopupbox from "@/views/user/components/birthday-popupbox";
export default {
  name: "editUser",
  components: {
    ImgPopupbox,
    NamePopupbox,
    MobilePopupbox,
    GenderPopupbox,
    BirthdayPopupbox,
  },
  data() {
    return {
      userProfile: {},
      imgPopup: false, //修改图像弹框
      namePopup: false, //修改名称弹框
      mobilePopup: false, //修改手机号弹框
      genderPopup: false, //修改性别弹框
      birthdayPopup: false, //修改生日弹框
      localImg: "",
    };
  },
  methods: {
    async getProfile() {
      const { data: res } = await getUserProfile();
      console.log(res);
      this.userProfile = res.data;
    },
    imgChange() {
      // 选择图片
      console.log("ohh");
      this.$refs.file.click();
    },
    upURL(e) {
      // 将一张图片在本地预览， 通过一种二进制的 blob的格式 --本地的地址
      let local_file = this.$refs.file.files[0];
      let url = window.URL.createObjectURL(local_file);
      console.log(url);
      //   保存本地路劲
      this.localImg = url;
      //   显示弹框
      this.imgPopup = true;
    },
    replaceImg(e) {
      if (e) this.userProfile.photo = e;
      this.imgPopup = false;
    },
    nameChange(e) {
      if (e) this.userProfile.name = e;
      this.namePopup = false;
    },
    mobileChange() {},
    genderChange(e) {
      this.userProfile.gender = e;
      this.genderPopup = false;
    },
    birthdayChange(e) {
      if (e) this.userProfile.birthday = e;
      this.birthdayPopup = false;
    },
  },
  created() {
    this.getProfile();
  },
};
</script>

<style lang='less' scoped>
.editUser {
  .userImg {
    width: 45px;
    height: 45px;
  }
  .userName {
    background-color: #eee;
  }
}
</style>